

<template>
    <div class="el-main-right">
          <div class="el-main-right-top el-main-right-top-border">
            <div class="el-main-right-top-booton">
              <!-- <el-button type="success">登录</el-button> -->
              <div class="dengluzhuce">
                登录     
            <!-- <el-button type="success"><router-link to="/login/zhuce" exact>注册</router-link>  </el-button> -->
            <router-link to="/login/zhuce" >注册</router-link> </div>
            </div>
          </div>
          <div class="el-main-right-con">
            <el-form
              :model="ruleForm"             
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="姓名" prop="uname">
                <el-input
                  placeholder="请输入真实姓名"
                  type="text"
                  v-model="ruleForm.uname"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item label="密码" prop="upassword">
                <el-input
                  placeholder="请输入密码"
                  type="password"
                  v-model="ruleForm.upassword"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
             
              <el-form-item label="身份证号" prop="uidcard">
                <el-input placeholder="请输入证件号" v-model="ruleForm.uidcard"></el-input>
              </el-form-item>
              <!-- <el-form-item>
                <div>
                  <select>
                    <option value="使用其他有效证件">使用其他有效证件</option>
                    <option value="中国人民解放军军人身份证件">中国人民解放军军人身份证件</option>
                    <option value="港澳居民来往内地通行证">港澳居民来往内地通行证</option>
                    <option value="台湾居民来往大陆通行证">台湾居民来往大陆通行证</option>
                    <option value="中华人民共和国护照">中华人民共和国护照</option>
                  </select>
                </div>
              </el-form-item> -->
              <el-form-item>
                <el-button type="primary" @click="pswdlogin('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
             <div class="el-main-right-cencer">
        <router-link to="/login/messagelogin" exact>按手机短信登录</router-link>
      </div>
            <div class="el-main-right-footer">
        <router-link to="/login/chongzhipswd" exact>忘记密码</router-link>
        
         账号申诉</div>
          </div>
        </div>
</template>


    <script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
     
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm .validateField("checkPass");
        }
        callback();
      }
    };

    var checkIdcard = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("证件不能为空"));
      }
      setTimeout(() => {
        var reg=/^[1-9]{1}[0-9Xx]{17}$/
       
        if (!(value.length==18)) {
          callback(new Error("必须18位数"));
        } else {
          if (!reg.test(value)) {
            callback(new Error("请输入正确格式"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入真实姓名"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };

    return {
      note: {
          backgroundImage: "url(" + require('../../assets/beijing.jpg') + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "25px auto",
          marginTop: "5px",
        },
     ruleForm: {
        uname: "",
        upassword: "",
        uidcard: "",
      },
    // user: {
    //     uname: "",
    //     upassword: "",
    //     uidcard: "",
    //   },
      rules: {
        upassword: [{ validator: validatePass, trigger: "blur" }],
        uname: [{ validator: validateName, trigger: "blur" }],      
        uidcard: [{ validator: checkIdcard, trigger: "blur" }]
      },
      
    };
  },
  methods: {


    
 pswdlogin: function(formName) {
         console.log(this.ruleForm.uname)
         console.log(this.ruleForm.upassword)      
         console.log(this.ruleForm.uidcard)              
      this.$refs[formName].validate(valid => {
        if(valid){ 
      this.$http
        .post("http://"+this.GLOBAL.ipAddress+":8001/user/pswdlogin", this.ruleForm)
        .then(function(data) {
         
          console.log(data.bodyText);
          if (data.bodyText == "success") {
       
         var ses=window.localStorage;
         var uname=this.ruleForm.uname 
         var upassword=this.ruleForm.upassword
         var uidcard=this.ruleForm.uidcard
         ses.setItem('uname',uname)
         ses.setItem('upassword',upassword) 
         ses.setItem('uidcard',uidcard);
        this.$router.push({path:'/personageindex'})
          } else if (data.bodyText == "failed1"){
            
                     this.$message({
          showClose: true,
          message: '由于你违法操作已被禁用，请联系管理人员解除禁用',
          type: 'warning'
        });
          }if(data.bodyText == "failed"){
          
            this.$message({
          showClose: true,
          message: '用户信息错误，请仔细填写',
          type: 'error'
        });
          }
        });
         }else {
          console.log("error submit!!");
          return false;
         }
         
         });
    },
    // submitForm(formName) {
    //   this.$refs[formName].validate(valid => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>


<style scoped>
.dengluzhuce{
  color: #4FC3F7;
  font-size: 25px;
  font-weight: bolder;

}
a{
  text-decoration: none;
  color: #4FC3F7;
}
.el-header {
  background-color: greenyellow;
  color: #333;
  text-align: center;
  line-height: 150px;
  font-family: "STXingkai";
  font-size: 50px;
  position: relative;
}
.el-header-area {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  font-family: "STXingkai";
  font-size: 50px;
  line-height: 150px;
  position: absolute;
  height: 150px;
  width: 80%;
  right: 150px;
  top: 50px;
}

.el-header-left {
  position: absolute;
  left: 230px;
}
.el-header-img {
  position: absolute;
  left: 60px;
}
/* ********************************* */

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  position: relative;
}

.el-main-right {
  height: 700px;
  width: 500px;
  background-color: #ffffff;
  position: relative;
  margin-left: 180px;
}
.el-main-right-con {
  position: absolute;
  top: 150px;
}
.el-main-right-top {
  position: absolute;
  width: 500px;
  height: 100px;
}
.el-main-right-cencer {
  position: absolute;
  top: 300px;
  right: 80px;
  font-size: 15px;
  color: #82b1ff;
}
.el-main-right-footer {
  position: absolute;
  top: 430px;
  right: -110px;
  font-size: 15px;
  color: #4FC3F7;
}
.el-main-right-top-booton {
  position: absolute;
  left: 10px;
  top: -25px;
}
.el-main-right-top-border {
  border-bottom: 3px solid #969696;
}
.el-main-footer {
  position: absolute;
  left: 200px;
}

.el-main-left {
  height: 700px;
  width: 500px;
  background-color: #ffffff;
  position: relative;
  margin-left: 880px;
  margin-top: -700px;
}
.el-left-img {
  position: absolute;
  left: 160px;
  top: 130px;
}
.el-left-img-small{
    position: absolute;
  left: 130px;
  top: 300px;
}

.el-left-ziti{
    position: absolute;
  left: 180px;
  top: 270px;
}
.el-left-ziti1{
    position: absolute;
  left: 180px;
  top: 290px;
}
.el-left-ziti2{
    position: absolute;
  left: 140px;
  top: 340px;
  font-size: 20px;
  font-weight: 300;
}
.el-left-ziti3{
    position: absolute;
  left: 180px;
  top: 370px;
  font-size: 20px;
  font-weight: 300;
}


/* .border {
  border: 1px solid red;
} */
body > .el-container {
  margin-bottom: 0px;
  margin-top: 0px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
    
    
    